<template>
  <div v-if="md">
    <div :class="['sl-scroll_bar','is-'+barType]" ref="horizontal-bar" :style="renderBarStyle()" @click.stop="clickBar">
      <div :class="['scrollbar_thumb',{'move': cursorDown}]" :style="renderThumbStyle()" @click.stop @mousedown.prevent.stop="mousedownHander" ref="thumb">
      </div>
    </div>
  </div>
</template>
<script>
import { on, off } from '@/common/dom'
export default {
  props: {
    barType: {
      type: String,
      default: 'horizontal'
    },
    contentWidth: Number,
    barsize: Number,
    axisX: Number
  },
  data() {
    return {
      horizontal: {
        offset: 'offsetWidth',
        size: 'width',
        axis: 'X',
        scrollSize: 'scrollWidth'
      },
      vertical: {
        offset: 'offsetHeight',
        size: 'height',
        axis: 'Y',
        scrollSize: 'scrollHeight'
      },
      thumb_translate: 0,
      cursorDown: false,
      md: false,
      start: 0,
      isClick: false
    }
  },
  computed: {
    bar_size() {
      if (!this.md) return 0;
      if (this.barsize) {
        return this.barsize;
      } else {
        if (this.$parent.$el.offsetWidth >= this.contentWidth) {
          return 0;
        } else {
          return this.$parent.$el.offsetWidth;
        }
      }
    },
    size() {
      if (!this.md) return 0;
      if (this.barsize) {
        return this.barsize * this.barsize / this.contentWidth;
      } else {
        if (this.$parent.$el.offsetWidth >= this.contentWidth) {
          return 0;
        } else {
          let barsize = this.$parent.$el.offsetWidth;
          return barsize * barsize / this.contentWidth;
        }
      }
    },
  },
  watch: {
    axisX: function(val) {
      if (!this.cursorDown) {
        let X = (this.bar_size - this.size) * val;
        let disX = X - this.thumb_translate;
        this.setLeft(disX);
      }
    },
    bar_size: function(now, old) {
      if (now) {
        this.$emit('on-show');
      } else {
        this.$emit('on-hidden');
      }
    }
  },
  methods: {
    renderBarStyle() {
      const style = {};
      style.width = `${this.bar_size}px`;
      return style;
    },
    renderThumbStyle() {
      const bar = this[this.barType];
      const style = {}
      const translate = `translate${bar.axis}(${this.thumb_translate}px)`;
      style[bar.size] = `${this.size}px`;
      style.transform = translate;
      style.msTransform = translate;
      style.webkitTransform = translate;
      return style;
    },
    mousedownHander(e) {
      this.cursorDown = true;
      this.start = e.clientX;
      on(document, 'mousemove', this.mousemovehandler);
      on(document, 'mouseup', this.mouseuphandler);
    },
    mousemovehandler(e) {
      e.preventDefault();
      if (!this.cursorDown) return;
      let disX = e.clientX - this.start;
      this.start = e.clientX;
      this.setLeft(disX);
    },
    setLeft(disX) {
      if (this.thumb_translate + disX > (this.bar_size - this.size)) {
        this.thumb_translate = this.bar_size - this.size;
      } else if (this.thumb_translate + disX < 0) {
        this.thumb_translate = 0
      } else {
        this.thumb_translate = this.thumb_translate + disX;
      };
      let move = this.thumb_translate / (this.bar_size - this.size) * 100;
      if (this.cursorDown || this.isClick) {
        this.$emit('scrollChange', move);
      }
    },
    mouseuphandler(e) {
      this.cursorDown = false;
      off(document, 'mousemove', this.mousemovehandler);
    },
    clickBar(e) {
       this.isClick = true;
       let disX = e.offsetX - (this.size / 2) - this.thumb_translate;
       this.setLeft(disX);
       this.isClick = false;
    }
  },
  destroyed() {
    off(document, 'mouseup', this.mouseuphandler);
  },
  mounted() {
    this.md = true;
  }
}

</script>
<style lang="less">
.sl-scroll_bar {
  border-radius: 4px;
  opacity: 1;
  background-color: rgba(0, 0, 0, .1);
  transition: opacity .12s ease-out;
  &.is-horizontal {
    height: 6px;
    .scrollbar_thumb {
      height: 6px;
      border-radius: 4px;
    }
  }
}

.scrollbar_thumb {
  border-radius: inherit;
  background-color: hsla(220, 4%, 58%, .2);
  transition: all 0.1s;
  &:hover {
    background-color: hsla(220, 4%, 58%, .8);
  }
  &.move {
    background-color: hsla(220, 4%, 58%, .8);
  }
}

</style>
